<template>
  <div>
    <h1>一个人的信息</h1>
    <p>姓：<input type="text" v-model="person.firstName"></p>
    <p>名: <input type="text" v-model="person.lastName"></p>
    <h2>全名: <input type="text" v-model="fullName"></h2>
  </div>
</template>

<script>
import { computed, reactive} from "vue";
export default {
  name: "Demo",

  setup() {

    let person = reactive({
        firstName: '张',
        lastName: '三娃'
    })
    
    //计算属性--简写(只可读)
    // person.fullName = computed(() => {
    //     return person.firstName + '-' + person.lastName
    // })

    //计算属性 - 完整（可读可写）
    let fullName = computed({
        get() {
            return person.firstName + '-' + person.lastName
        },
        set(val) {
            let nameArr = val.split('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })

    return {
      person,
      fullName
    };
  },
};
</script>